<template>
    <li>
        <div>
            <input type="checkbox" v-model="todo.isDone">
            <span :class="[todo.isDone ? 'del-line' : '']">{{ todo.name }}</span>
        </div>
        <div title="删除" @click="delTodo(todo.id)">×</div>
    </li>
</template>

<script setup>
const props = defineProps(['todo'])
const emit = defineEmits(['delTodo'])

const delTodo = (id) => {
    // 子通信父
    emit('delTodo', id)
}

</script>

<style lang="scss" scoped>
li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;

    .del-line {

        color: #666;
        text-decoration: line-through;
    }
}
</style>